<template>
  <div class="froala-body">
    <froala :config="froalaConfig" v-model="froalaContent"></froala>
  </div>
</template>

<script>
export default {
  name: "FroalaEditor",
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: String,
    },
  },
  watch: {
    value(val) {
      this.froalaContent = val;
      this.requestHeaders["Authorization"] = this.$store.getters.token;
    },
    froalaContent(val) {
      this.$emit("change", val);
    },
  },
  data() {
    return {
      editor: null,
      // More -> https://www.froala.com/wysiwyg-editor/docs/options
      froalaConfig: {
        // toolbarButtons: ['undo', 'redo', 'clearFormatting', '|', 'bold', 'italic', 'underline', 'strikeThrough', '|', 'fontFamily', 'fontSize', 'color', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', '|', 'print', 'spellChecker', 'help', '|', 'fullscreen'], // ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'spellChecker', 'help', 'html', '|', 'undo', 'redo'],//显示可操作项
        theme: "null", // 主题
        placeholder: "请填写内容",
        language: "zh_cn", // 国际化
        quickInsertButtons: ["image", "table", "ul", "ol", "hr"], // 快速插入项
        // toolbarVisibleWithoutSelection: true,//是否开启 不选中模式
        disableRightClick: true, // 是否屏蔽右击
        colorsHEXInput: false, // 关闭16进制色值
        toolbarSticky: true, // 操作栏是否自动吸顶
        zIndex: 99999,
        fileUpload: false,
        //imageUploadURL: process.env.BASE_URL + "/api/home/upload/img", // 上传url
        imageUploadURL: "/api/home/upload/img", // 上传url
        // fileUploadURL: 'http://i.froala.com/upload', // 上传url
        imageMaxSize: 1024 * 1024 * 3,
        imageUploadRemoteUrls: false,
        requestHeaders: {
          Authorization: this.$store.getters.token,
        },
        imageUploadParams: {
          object_type: 20,
        },
        events: {
          "froalaEditor.initialized": function (e, editor) {
            this.editor = editor;
          },
          "froalaEditor.contentChanged": function (e, editor) {
            // console.log('contentChanged editor', editor.html.get(true))
            // this.$emit('change', editor.html.get(true))
          },
        },
      },
      froalaContent: "", // 默认测试文本
    };
  },
};
</script>

<style scoped>
.froala-body >>> a[href="https://froala.com/wysiwyg-editor"], a[href="https://www.froala.com/wysiwyg-editor?k=u"]
{
  display: none !important;
  position: absolute;
  top: -99999999px;
}
</style>
